<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>父传子：数据在父组件中，要传给子组件</p>
        <p>步骤1:在父组件中将数据添加给子组件的标签，属性=属性值，张国要友情提醒：记得加上v-bind</p>
        <p>步骤2:在子组件中通过props属性来接受，属性值是一个字符串数组，数组中的内容是父组件的属性名</p>
        <son1
            :msg1="info1"
            :msg2="info2"
            :msg3="info3"
        ></son1>
    </div>
    <template id="son1">
        <div>
            <p>父组件传来的值：{{msg1}}</p>
            <p>{{msg2[0]}}</p>
            <p>{{msg3.name}}</p>
        </div>
    </template>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                info1: '带好口罩，多加衣服',
                info2: [1,2,3,4],
                info3: {name: 'Tom', age: 20}
            },
            components: {
                son1: {
                    template: '#son1',
                    props: ['msg1', 'msg2', 'msg3']
                }
            }
        })
    </script>
</body>
</html>